
const glob = require('glob')
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const merge = require("webpack-merge");
const common = require('./webpack.common.js');
const config = require('./config.json');

const outputDirectory = path.resolve(__dirname, 'activity');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// 多页面打包
const setMPA = () => {
  const entry = {};
  const htmlWebpackPlugins = [];

  const entryFiles = glob.sync(path.join(__dirname, './src/view/*/index.js'))

  Object.keys(entryFiles).map(index => {
      const entryFile = entryFiles[index];
      const match = entryFile.match(/src\/view\/(.*)\/index\.js/);
      const pageName = match && match[1];

      entry[pageName] = entryFile;
      htmlWebpackPlugins.push(
          new HtmlWebpackPlugin({
              template: path.join(__dirname, `src/view/${pageName}/index.html`),
              filename: `${pageName}.html`,
              chunks: ['vueect','vendors',pageName],
              inject: true,
              minify: {
                  html5: true,
                  collapseWhitespace: true,
                  preserveLineBreaks: false,
                  minifyCSS: true,
                  minifyJS: true,
                  removeComments: false
              }
          })
      );
  })
  console.log('entryFiles', entryFiles);

  return {
      entry,
      htmlWebpackPlugins
  }
}

const { entry, htmlWebpackPlugins } = setMPA();
module.exports = merge(common, {
  mode: 'production',
  // devtool: 'cheap-module-eval-source-map',
  entry,
  output: {
    publicPath: '/sale2/', 
    // publicPath: config.publicPath, // js引用的路径或者CDN地址
    // publicPath: 'https://piccache.cnki.net/yxpt/buy/',
    path: outputDirectory, // 打包文件的输出目录
    filename: 'js/[name]-[chunkhash].js', // 代码打包后的文件名
    chunkFilename: "js/[name]-[chunkhash:8].js" // 代码拆分后的文件名 
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxSize: 0,
      minChunks: 1,
      name: true,
      cacheGroups: {
        plugin: {
          name: 'plugin',
          minSize: 0,
          test: /[\\/]src[\\/]plugin[\\/]/,
          priority: 11
        },
        vueect: {
          name: 'vueect',
          chunks: "all",
          minSize: 0,
          test: /[\\/]node_modules[\\/](vue|vuex|vue-router)[\\/]/,
          priority: 20
        },
        vendors: {
          name: 'vendors',
          chunks: "all",
          minSize: 0,
          test: /[\\/]node_modules[\\/]/,
          priority: 15
        },
        commons: {
          name: 'commons',
          chunks: "all",
          minSize: 0, //表示在压缩前的最小模块大小,默认值是 30kb
          minChunks: 2, // 最小公用次数
          priority: 7, // 优先级
          reuseExistingChunk: true // 公共模块必开启
        },
        // default: {
        //   minChunks: 2,
        //   priority: -20,
        //   reuseExistingChunk: true
        // }
      }
    }
  },
  //打包排除
  plugins: [
    new BundleAnalyzerPlugin({
      //  可以是`server`，`static`或`disabled`。
      //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
      //  在“静态”模式下，会生成带有报告的单个HTML文件。
      //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
      /**
       * 'server', 'static', 'json', 'disabled'
       * server => http服务显示
       * static => 静态文件
       * json => 将分析结构以 json 形式输出
       * disabled => 不做任何行为
       * 这里按照我的习惯是在开发的时候自动打开浏览器查看统计，打包的时候输出在dist下
       */
      analyzerMode: 'disabled',
      //  将在“服务器”模式下使用的主机启动HTTP服务器。
      analyzerHost: '127.0.0.1',
      //  将在“服务器”模式下使用的端口启动HTTP服务器。
      analyzerPort: 8888,
      //  路径捆绑，将在`static`模式下生成的报告文件。
      //  相对于捆绑输出目录。
      reportFilename: 'report.html',
      //  模块大小默认显示在报告中。
      //  应该是`stat`，`parsed`或者`gzip`中的一个。
      //  有关更多信息，请参见“定义”一节。
      defaultSizes: 'parsed',
      //  在默认浏览器中自动打开报告
      openAnalyzer: true,
      //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
      generateStatsFile: false,
      //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
      //  相对于捆绑输出目录。
      statsFilename: 'stats.json',
      //  stats.toJson（）方法的选项。
      //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。
      //  在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
      statsOptions: null,
      logLevel: 'info' // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
    }),
    new CleanWebpackPlugin(['js', 'style', 'scripts'], {
      root: outputDirectory,
      verbose: true,
    }),
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'src/favicon.ico'),
      to: path.resolve(__dirname, 'activity/favicon.ico'),
    }]),
    // 压缩代码
    // new UglifyJSPlugin({ 
    //   extractComments: false, // 移除注释
    // }),
    // css 插件
    new MiniCssExtractPlugin({
      filename: 'style/[name]-[chunkhash:8].css',
      chunkFilename: 'style/[id]-[chunkhash:8].css',
    }),
    // new ParallelUglifyPlugin({
    //   uglifyJS: {},
    //   test: /$.js/g,
    //   include: [],
    //   exclude: [],
    //   cacheDir: '',
    //   workerCount: '',
    //   sourceMap: false
    // }),
    new TerserPlugin({
      terserOptions: {
        ecma: 5,
        warnings: false,
        parse: {},
        compress: {},
        mangle: true, // Note `mangle.properties` is `false` by default.
        module: false,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false,
        safari10: true
      }
    })
  ].concat(htmlWebpackPlugins)
});